<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
	font-size: 16px;
	text-align: center;
}
</style>
<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 标题导航栏 -->
		<div class="title-box crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-tickets"></i>卡操作
				</el-breadcrumb-item>
				<el-breadcrumb-item>写卡任务</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 主体区 -->
		<div class="container">
			<!-- 查询条件 -->
			<div class="search-box">
				<div class="search-item-box">
					<table>
						<tr>
							<td>
								<i class="el-icon-search"></i>
							</td>
							<td class="search_td">
								<el-select v-model="parampters.result" clearable placeholder="写卡结果">
									<el-option label="成功" value="true"></el-option>
									<el-option label="失败" value="false"></el-option>
									<el-option label="未知" value="new"></el-option>
								</el-select>
							</td>
							<td class="search_td">
								<el-input v-model="parampters.sequenceId" placeholder="交易流水号" clearable class="handle-input mr10" style="width:190px;"></el-input>
							</td>
							<td class="search_td" style="width: 120px;">
								<el-input v-model="parampters.phoneNumber" placeholder="手机号" clearable class="handle-input mr10" style="width:130px;"></el-input>
							</td>
							<td class="search_td">
								<el-select v-model="parampters.isp" clearable placeholder="运营商">
									<el-option label="联通" value="10010"></el-option>
									<el-option label="电信" value="10000"></el-option>
								</el-select>
							</td>
							<td class="search_td">
								<el-date-picker v-model="parampters.starttime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求时间起始" class="handle-input mr10" style="width:200px;">
								</el-date-picker>
							</td>
							<td class="search_td">
								<el-date-picker v-model="parampters.endtime"   type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求时间终止" class="handle-input mr10" style="width:200px;">
								</el-date-picker>
							</td>
						</tr>
					</table>
				</div>
				<div class="search-button-box">
					<el-button type="primary" size="small" icon="search" @click="searchLoad">查询</el-button>
					<!-- <el-button type size="small" icon="el-icon-download" @click="toExportExcel">导出&nbsp;Excel</el-button> -->
				</div>
			</div>
			<!-- 查询条件END -->
			<!-- 数据列表 -->
			<div class="grid-data-box">
				<el-table
					v-loading="tableLoading"
					:max-height="tableListHeight"
					:data="tableData"
					border
					:cell-class-name="changeColumnClass"
					:header-cell-style="{background:'#F3F3F3',color:'#606266'}"
					show-overflow-tooltip
					style="width: 100%"
					ref="multipleTable"
				>
					<el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
					<el-table-column prop="sequenceId" label="交易流水号" width="180" show-overflow-tooltip></el-table-column>
					<el-table-column prop="iccid" label="ICCID" width="180" show-overflow-tooltip></el-table-column>
					<el-table-column prop="imsi" label="IMSI" width="130" show-overflow-tooltip></el-table-column>
					<el-table-column prop="phoneNumber" label="手机号" width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="isp" label="运营商" width="100" :formatter="formatter" show-overflow-tooltip></el-table-column>
					<el-table-column prop="result" label="写卡结果" width="100" :formatter="formatter" show-overflow-tooltip></el-table-column>
          			<el-table-column prop="timestamp" label="创建时间" width="200" show-overflow-tooltip></el-table-column>
          			<el-table-column prop="errorMsg" label="失败原因" show-overflow-tooltip></el-table-column>
				</el-table>
			</div>
			<!-- 数据列表END -->
			<!-- 翻页导航条 -->
			<div class="navigate-box">
				<div class="pagination">
					<el-pagination
						background
						@current-change="handleCurrentChange"
						:total="parampters.totalCount"
						@size-change="handleSizeChange"
						:current-page.sync="parampters.pageIndex"
						:page-sizes="[20, 50, 100, 200]"
						:page-size="parampters.pageRows"
						layout="total, sizes, prev, pager, next"
					></el-pagination>
				</div>
			</div>
			<!-- 翻页导航条END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>


<script>
export default {
	data() {
		return {
			// 筛选条件
			parampters: {
				//查询参数
				loginsid: "", //登录会话SID
				pageRows: 20, //每页行数
				pageIndex: 1, //当前页
				pageCount: 0, //总页数
				totalCount: 0, //总记录数
				result: "", //写卡结果
				sequenceId: "", //交易流水号
				phoneNumber: "", //手机号
				isp: "", //运营商
				starttime: null, //请求时间起始
				endtime: null, //请求时间终止
			},
			// 查询出的表格数据
			tableLoading: true,
			tableData: [],
			//confirm提示信息弹框
			confirmBox: null,
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "list",
			//字典集
			dicts: {}
		};
	},
	// 进入页面加载数据
	activated() {
		this.$set(this.parampters, "result", "");
		this.$set(this.parampters, "sequenceId", "");
		this.$set(this.parampters, "phoneNumber", "");
		this.$set(this.parampters, "isp", "");
		this.$set(this.parampters, "starttime", "");
		this.$set(this.parampters, "endtime", "");
		this.handleInitLoad();
	},
	methods: {

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initSelectOptoins();
			this.searchLoad();
		},

		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("isp", null);
		},


		 /**
		 * 通用定义:下拉字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			let url = "/rps/dictionary/";
			this.$axios
			.get(url, {
				params: {
					type: dictKind
				},
				headers:{
					operator: this.$util.getLoginer().userid,
					withCredentials: true
				}
			})
			.then(res => {
				let data = res.data;
				if (data.success) {
					this.$set(this.dicts, dictKind, data.data.list);
				} else {
					console.log(data.message);
					// this.$error( "查询失败" + data.message );
				}
			})
			.catch(err => {
				console.log(err);
			});
		},

		changeColumnClass(data) {
			// if (data.columnIndex == 1 || data.columnIndex == 2) {
			// 	return "tabcolumn_left";
			// }
		},

		/**
		 * @augments  row 行所在的数据
		 * 表格数据列 内容字典转换
		 */

		formatter(row, column) {
			if (column.property == "isp") {
				return this.$dicts.transDict(this.dicts.isp, "code", "name", row.isp);
			} else if (column.property == "result") {
				switch(row.result){
					case "true": return "成功";
					case "false": return "失败";
					case "new": return "未知";
					default: return "";
				}
			}else if(column.property == "timestamp"){
				if(row.timestamp == undefined || row.timestamp == null || row.timestamp == ""){
					return "";
				}else{
					let now = new Date(Number(row.timestamp));
					let y = now.getFullYear();
					let m = now.getMonth() + 1;
					let d = now.getDate();
					return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
				}
			}
		},

		/**
		 * @augments val 页码
		 * 切换页码操作
		 */
		handleCurrentChange(val) {
			this.parampters.pageIndex = val;
			// 重新获取当前页码的数据
			this.searchLoad();
		},

		/**
		 * @augments val 每页显示条数
		 * 每页显示条数修改
		 */
		handleSizeChange(val) {
			// 修改每页显示条数
			this.parampters.pageRows = val;
			// 重新获取数据
			this.searchLoad();
		},

		/**
		 * 条件筛选查询,加载数据
		 */
		searchLoad() {
			this.parampters = this.$util.trimObjStr(this.parampters);
			this.parampters.loginsid = this.$util.getLoginer().sessionId;
			this.tableLoading = true;
			this.$axios
				.get("/rps/cardPersonalLogs/", {
					params: this.parampters,
                    headers:{
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
				})
				.then(res => {
					console.log(res);
					let data = res.data;
					if (data.success) {
						this.tableData = data.data.list;
						this.tableLoading = false;
						this.parampters.pageIndex = data.data.pageNum!=undefined ? parseInt(data.data.pageNum):1;
						this.parampters.pageCount = data.data.totalPage!=undefined ? parseInt(data.data.totalPage):0;
						this.parampters.totalCount = data.data.count!=undefined ? parseInt(data.data.count) : 0;
					} else {
						this.tableLoading = false;
						this.$error( data.message );
					}
				})
				.catch(err =>  {
					this.tableLoading = false;
					console.log(err);
				});
		},
		toExportExcel(){
			this.$axios
				.get("/rps/cardPersonalLog/export/", {
					params: this.parampters,
					headers: {
						operator: this.$util.getLoginer().userid,
						withCredentials: true
					}
				})
				.then(res => {
					let data = res.data;
					// 关闭提交表单的loading
					if (data.success) {
						let downloadUrl = data.data;
						let n = downloadUrl.split("/");
						var link = document.createElement('a');
						//设置下载的文件名
						link.download = n[ n.length-1 ];
						link.style.display = 'none';
						//设置下载路径
						link.href = downloadUrl;
						//浏览器兼容，禁止打开新的页面
						link.target = "_self";
						//触发点击
						document.body.appendChild(link);
						link.click();
						//移除节点
						document.body.removeChild(link);
					} else {
						this.$error(data.message);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},

	}
};
</script>
